<template>
  <el-dialog
    title="选择人员"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    width="80%"
  >
    <!-- <div>
      <el-button type="success" size="mini" @click="hanlleAdd()"
        >新增</el-button
      >
      <el-button type="danger" size="mini" @click="handleDelete()"
        >批量删除</el-button
      >
      <el-button @click="handleReset()" size="mini" type="info"
        >EXCEL上传</el-button
      >
      <el-button @click="downLoad()" size="mini" type="primary"
        >模板下载</el-button
      >
    </div> -->
    <div>
      <el-card class="box-card">
        <el-form :inline="true" :model="dataForm" class="dadeFrom">
          <el-input
            v-model="dataForm.staffAccount"
            placeholder="推送人员工号"
            style="width: 200px"
            clearable
          ></el-input>
          <el-input
            v-model="dataForm.FieldValue"
            placeholder="字段值名称"
            style="width: 200px"
            clearable
          ></el-input>

          <el-button @click="searchData()" type="primary">查询</el-button>
          <el-button @click="handleReset()" type="primary">重置</el-button>
        </el-form>
      </el-card>
      <el-card class="box-card" style="margin-top: 10px">
        <el-button type="success" size="mini" @click="hanlleAdd()"
          >新增</el-button
        >
        <!-- <el-button type="danger" size="mini" @click="handleDelete()"
          >批量删除</el-button
        > -->
        <!-- <el-button type="danger" size="mini" @click="handleDelete()"
          >{{groupId}}</el-button> -->
        <!-- <el-button @click="handleUpload()" size="mini" type="info"
          >EXCEL上传</el-button
        > -->
        <!-- <el-upload
          style="display: inline-block; line-height: 28px"
          name="file"
          ref="upload"
          :multiple="true"
          :show-file-list="false"
          :onError="uploadError"
          :onSuccess="uploadSuccess"
          :action="actionUp"
          :auto-upload="true"
          :data="iconFileData"
        >
          <el-button style="margin: 0, 10px" type="info" size="mini"
            >EXCEL上传</el-button
          >
        </el-upload> -->
        <el-button type="info" size="mini" @click="handleUploadFile()"
          >EXCEL上传</el-button
        >
        <el-dialog
          title="上传文件"
          :visible.sync="fileUploadVisible"
          :close-on-click-modal="false"
          class="edit-form"
          :before-close="handleClose"
          @close="rightDuanbi"
          width="40%"
          append-to-body
        >
          <el-form label-width="100px">
            <el-form-item>
              <el-upload
                drag
                accept=".pdf, .doc, .docx, .xls, .xlsx"
                class="upload-demo"
                ref="uploadIcon"
                :limit="limitNum"
                :auto-upload="false"
                :action="iconAction"
                :on-exceed="exceedFile"
                :on-change="fileChange"
                :on-remove="handleRemove"
                :on-preview="handlePreview"
                :on-success="handleSuccessIcon"
                :on-error="handleErrorIcon"
                :file-list="fileList"
                :data="iconFileData"
              >
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">
                  将文件拖到此处，或<em>点击上传</em>
                </div>
                <!-- <div class="el-upload__tip" slot="tip">
              上传文件只能是 pdf、doc、docx、xls、xlsx格式，且不超过10M
            </div> -->
              </el-upload>
              <el-button
                size="small"
                type="primary"
                @click="IcuoUploadFile"
                style="margin-left: 140px"
                >确认提交</el-button
              >
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click.native="handleCancel()">取消</el-button>
            <!-- <el-button type="primary" @click.native="handleUploadFile()"
          >提交</el-button
        > -->
          </div>
        </el-dialog>
        <!-- <el-upload
          v-if="uploadShowT"
          style="display: inline-block; line-height: 28px"
          name="file"
          ref="upload"
          :multiple="true"
          :show-file-list="false"
          :onError="uploadError"
          :onSuccess="uploadSuccess"
          :action="actionUp"
          :auto-upload="true"
          :data="iconFileData"
        >
        <el-button style="margin: 0, 10px" type="info" size="mini"
            >EXCEL上传</el-button
          >
        </el-upload>-->
        <el-button @click="downLoad()" size="mini" type="primary"
          >模板下载</el-button
        >
        <el-select :value="value" placeholder="导出模板选择" v-if="selectShow">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            @click.native="selecetV(item.value)"
          >
          </el-option>
        </el-select>
        <el-select
          :value="value2"
          placeholder="导入模板选择"
          v-if="selectShowT"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            @click.native="selecetVT(item.value)"
          >
          </el-option>
        </el-select>
        <el-table :data="dataList" style="width: 100%; margin-top: 20px">
          <!-- <el-table-column type="selection" width="55"> </el-table-column> -->
          <el-table-column type="index" label="序号" align="center">
          </el-table-column>
          <!-- <el-table-column prop="unitType" label="单元类别" align="center">
          </el-table-column> -->
          <el-table-column prop="latn" label="地市" align="center">
          </el-table-column>
          <el-table-column prop="unitName" label="单元类别名称" align="center">
          </el-table-column>
          <!-- <el-table-column
            prop="latnId"
            label="地市code"
            align="center"
          >
          </el-table-column> -->
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button
                type="primary"
                size="small"
                @click="hanlleSearch(scope.row)"
                >查看</el-button
              >
              <el-button
                type="primary"
                size="small"
                @click="hanlleAdd(scope.row)"
                >编辑</el-button
              >
              <el-button
                type="danger"
                size="small"
                @click="handleDelete(scope.row.id)"
                >删除</el-button
              >
              <!-- <el-button
                type="danger"
                size="small"
                @click="handleDelete(scope.row.id)"
                >删除</el-button
              > -->
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <Pagination
          :total="total"
          :pageNum="pageNum"
          :pageSize="pageSize"
          @pageChange="pageChange"
        />
      </el-card>
    </div>
    <!-- 新增和编辑 -->
    <!-- <person ref="addorUpdate" @refreshDataList="getPerson"></person> -->
    <!-- 内层弹框 -->
    <el-dialog
      :title="!addForm.id ? '新增' : '分组列表'"
      :close-on-click-modal="false"
      :visible.sync="innerVisible"
      append-to-body
      @close="close"
      width="90%"
    >
      <el-table :data="groupDataList" style="width: 100%; margin-top: 20px">
        <!-- <el-table-column type="selection" width="55"> </el-table-column> -->
        <el-table-column type="index" label="序号" align="center">
        </el-table-column>
        <el-table-column prop="latn" label="地市" align="center">
        </el-table-column>
        <!-- <el-table-column prop="latn" label="地市" align="center">
        </el-table-column> -->
        <el-table-column
          prop="threeUnit"
          label="三级单元"
          align="center"
          v-if="
            this.unitType === '3' ||
            this.unitType === '4' ||
            this.unitType === '5'
          "
        >
        </el-table-column>
        <el-table-column
          prop="threeUnitId"
          label="三级单元ID"
          align="center"
          v-if="
            this.unitType === '3' ||
            this.unitType === '4' ||
            this.unitType === '5'
          "
        >
        </el-table-column>
        <el-table-column
          prop="fourUnit"
          label="四级单元"
          align="center"
          v-if="this.unitType === '5' || this.unitType === '4'"
        >
        </el-table-column>
        <el-table-column
          prop="fourUnitId"
          label="四级单元ID"
          align="center"
          v-if="this.unitType === '5' || this.unitType === '4'"
        >
        </el-table-column>
        <el-table-column
          prop="fiveUnit"
          label="五级单元"
          align="center"
          v-if="this.unitType === '5'"
        >
        </el-table-column>
        <el-table-column
          prop="fiveUnitId"
          label="五级单元ID"
          align="center"
          v-if="this.unitType === '5'"
        >
        </el-table-column>
        <el-table-column prop="unitType" label="单元类别" align="center">
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" align="center">
        </el-table-column>
        <el-table-column
          prop="pushAcc"
          label="推送人员工号"
          align="center"
          :render-header="renderHeader"
        >
          <template slot-scope="scope">
            <div>
              <span>{{ scope.row.pushAcc }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="pushName"
          label="推送人员姓名"
          align="center"
          :render-header="renderHeader"
        >
          <template slot-scope="scope">
            <div>
              <span>{{ scope.row.pushName }}</span>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <Pagination
        :total="totalG"
        :pageNum="pageNumG"
        :pageSize="pageSizeG"
        @pageChange="pageChangeG"
      />

      <!-- <el-form
        :model="addForm"
        :rules="dataRule"
        ref="addForm"
        @keyup.enter.native="dataFormSubmit()"
        label-width="115px"
      >
        <el-form-item label="群组ID" prop="groupId">
          <el-input
            v-model="addForm.groupId"
            disabled="disabled"
            style="width: 300px"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="字段" prop="field">
          <el-input
            v-model="addForm.field"
            placeholder="请输入字段"
            style="width: 300px"
            clearable
            @input="change($event)"
          ></el-input>
        </el-form-item>
        <el-form-item label="字段值" prop="fieldValue">
          <el-input
            v-model="addForm.fieldValue"
            placeholder="请输入字段值"
            style="width: 300px"
            clearable
            @input="change($event)"
          ></el-input>
        </el-form-item>
        <el-form-item label="推送人员" prop="staffName">
          <el-input
            v-model="addForm.staffName"
            placeholder="请输入推送人员"
            style="width: 300px"
            clearable
            @input="change($event)"
          ></el-input>
        </el-form-item>
        <el-form-item label="推送人员工号" prop="staffAccount">
          <el-input
            v-model="addForm.staffAccount"
            placeholder="请输入推送人员工号"
            style="width: 300px"
            clearable
            @input="change($event)"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
      </span> -->
    </el-dialog>
  </el-dialog>
</template>

<script>
import person from "./person-add-or-update";
export default {
  data() {
    return {
      dialogVisible: false,
      innerVisible: false,
      fileUploadVisible: false,
      iconAction: "", //文件上传的接口

      fileList: [], // excel文件列表
      limitNum: 1, // 上传excell时，同时允许上传的最大数
      action: "",
      actionUp: "",
      iconFileData: {
        //文件上传所需要的参数
        file: "",
        unitType: "",
      },
      pageNum: 1,
      pageSize: 10,
      total: 0,
      addForm: {
        groupId: "",
        id: 0,
        field: "",
        fieldValue: "",
        staffName: "",
        staffAccount: "",
      },
      dataForm: {
        title: "", //标题
        userKeyword: "", //关键字
        createTime: "", //创建时间
        staffAccount: "", //推送人员工号
        FieldValue: "", //推送人员架构名称
      },
      ids: [],
      dataList: [],
      groupDataList: [], //分组列表
      pageNumG: 1,
      pageSizeG: 10,
      totalG: 0,
      unitType: "", //单元类别
      data: {}, //点击查看的数据
      options: [
        {
          value: "2",
          label: "二级单元",
        },
        {
          value: "3",
          label: "三级单元",
        },
        {
          value: "4",
          label: "四级单元",
        },
        {
          value: "5",
          label: "五级单元",
        },
      ],
      value: "",
      value2: "",
      selectShow: false, //模板下载下拉框显隐
      selectShowT: false, //模板导入下拉框显隐
      uploadShowT: false,
      dataRule: {
        field: [{ required: true, message: "字段不能为空", trigger: "blur" }],
        fieldValue: [
          { required: true, message: "字段值不能为空", trigger: "blur" },
        ],
        staffName: [
          { required: true, message: "推送人不能为空", trigger: "blur" },
        ],
        staffAccount: [
          { required: true, message: "推送人工号不能为空", trigger: "blur" },
        ],
      },
    };
  },
  components: {
    person,
  },
  computed: {
    groupId: {
      get() {
        return this.$store.state.user.groupId;
      },
    },
    cityCode: {
      get() {
        return this.$store.state.user.cityId;
      },
      set(val) {
        this.$store.commit("user/updateCityCode", val);
      },
    },
  },
  activated() {},
  created() {
    this.actionUp = this.$http.adornUrl(
      `staffConfig/importDate?token=${this.$cookie.get("token")}`
    );
    this.iconAction = this.$http.adornUrl(
      `unitStaff/unitImport/?token=${this.$cookie.get("token")}`
    );
    // alert(this.actionUp)
    // this.getPerson()
  },
  methods: {
    //人员配置列表
    getPerson() {
      this.dialogVisible = true;
      this.selectShowT = false;
      this.selectShow = false;
      // console.log("id", id);
      //   this.addForm.groupId = this.groupId;
      //   this.iconFileData.groupId = this.groupId;
      //   console.log("this.addForm.groupId", this.addForm.groupId);
      //   console.log("this.iconFileData.groupId", this.iconFileData.groupId);
      //   console.log(
      //     "this.iconFileData.groupId",
      //     typeof this.iconFileData.groupId
      //   );
      //列表(点击人员选择)
      this.$http({
        url: this.$http.adornUrl(`unitStaff/groupList`),
        method: "get",
        params: this.$http.adornParams({
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          latnId: this.cityCode,
        }),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.dataList = data.page.records;
          this.total = data.page.total;
        } else {
          this.$message.error(data.msg);
        }
      });
    },

    //右上角叉号事件
    close() {
      this.addForm = {};
      //   this.$refs.addForm.clearValidate();
    },
    
    // 分页（点击人员选择）
    pageChange(page) {
      console.log(page._pageSize);
      console.log(page._currentPage);
      this.pageSize = page._pageSize;
      this.pageNum = page._currentPage;
      this.getPerson();
    },
    // 分页(分组列表)
    pageChangeG(page) {
      console.log(page._pageSize);
      console.log(page._currentPage);
      this.pageSizeG = page._pageSize;
      this.pageNumG = page._currentPage;
      //   this.getPersonG();
      this.hanlleSearch(this.data); //之间是查看的按钮
    },
    // 点击搜索
    searchData() {
      this.getPerson();
    },
    //查看
    hanlleSearch(data) {
      this.data = data;
      this.innerVisible = true;
      console.log("data", data);
      this.unitType = data.unitType;
      this.addForm.id = data || 0;
      console.log("this.addForm.id", this.addForm.id);
      this.visible = true;
      this.$http({
        url: this.$http.adornUrl(`unitStaff/groupInfo`),
        method: "get",
        params: this.$http.adornParams({
          pageNum: this.pageNumG,
          pageSize: this.pageSizeG,
          latnId: data.latnId,
          unitType: data.unitType,
        }),
      }).then(({ data }) => {
        console.log("--------------------", data);
        if (data && data.code === 0) {
          this.groupDataList = data.page.records;
          this.totalG = data.page.total;
        } else {
          this.$message.error(data.msg);
        }
      });
      //   if (this.addForm.id === 0) {
      //     this.addForm.groupId = this.groupId;
      //   } else {
      //     let obj = JSON.parse(JSON.stringify(data));
      //     console.log("obj", obj);
      //     (this.addForm.groupId = obj.groupId), (this.addForm.field = obj.field);
      //     this.addForm.fieldValue = obj.fieldValue;
      //     this.addForm.staffAccount = obj.staffAccount;
      //     this.addForm.staffName = obj.staffName;
      //   }
      //   console.log("this.addForm.groupId==", this.addForm.groupId);
    },
    //内层弹框的新增和编辑
    dataFormSubmit() {
      console.log(this.addForm);

      let id = "";
      if (this.addForm.id === 0) {
        id = "";
      } else {
        id = this.addForm.id.id;
      }
      console.log("this.addForm.id", id);
      // return
      this.$refs["addForm"].validate((valid) => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(
              `staffConfig/${!this.addForm.id ? "save" : "update"}`
            ),
            method: "post",
            data: this.$http.adornData({
              id: id,
              groupId: this.addForm.groupId,
              field: this.addForm.field,
              fieldValue: this.addForm.fieldValue,
              staffName: this.addForm.staffName,
              staffAccount: this.addForm.staffAccount,
            }),
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "操作成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.innerVisible = false;
                  this.getPerson();
                  // this.$emit("refreshDataList");
                },
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        }
      });
    },
    //重置
    handleReset() {
      this.dataForm.staffAccount = "";
      this.dataForm.FieldValue = "";
      this.getPerson();
    },
    change(e) {
      this.$forceUpdate();
    },
    // 多选
    // handleSelectionChange(val) {
    //   this.ids = [];
    //   val.map((item) => {
    //     this.ids.push(item.id);
    //   });
    // },
    // 删除
    handleDelete(id) {
      let ids = [];
      if (id) {
        ids = [id];
      } 
      // else {
      //   ids = this.ids;
      //   if (ids.length == 0) {
      //     this.$message.error("请先选择要删除的选项");
      //     return false;
      //   }
      // }
      console.log(ids);
      // return
      this.$confirm(`您确定要删除吗?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http({
            url: this.$http.adornUrl("staffConfig/delete"),
            method: "post",
            data: this.$http.adornData({ ids: ids }),
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "操作成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.getPerson();
                },
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        })
        .catch(() => {});
    },
    //excel上传
    // 上传成功(热门文章)
    uploadSuccess(response, file, fileList) {
      console.log("11111111111", response);
      console.log("11111111111", file);
      console.log("11111111111", fileList);
      if (response.code === 500) {
        this.$message.error(response.msg);
      } else {
        this.$message.success("上传成功");
        this.getPerson();
      }
    },
    // 上传失败(热门文章)
    uploadError(response, file, fileList) {
      console.log("2222222222222222");
      console.log("2222222222222222", response);
      console.log("2222222222222222", file);
      console.log("2222222222222222", fileList);
      this.$message.error("上传失败，请联系管理员");
    },
    //模板下载
    downLoad() {
      this.selectShow = true;
    },
    selecetV(value) {
      console.log(value, "asdfasfdsd");
      // return
      this.action = this.$http.adornUrl(`staffConfig/downFile?type=${value}`);
      console.log(this.action, "ssss");
      window.open(this.action);
      this.selectShow = false;
    },
    handleUploadFile() {
      //   this.fileUploadVisible = true;
      this.selectShowT = true;
    },
    //上传
    selecetVT(value2) {
      // console.log(value2, "111111");
      this.fileUploadVisible = true;
      this.iconFileData.unitType = parseInt(value2);
      console.log("sswww", this.iconFileData.unitType);
      // console.log("sswww",typeof this.iconFileData.unitType);
      // console.log("11111111111111",this.iconFileData);
    },
    // 文件超出个数限制时的钩子
    exceedFile(files, fileList) {
      this.$message.warning(
        `只能选择 ${this.limitNum} 个文件，当前共选择了 ${
          files.length + fileList.length
        } 个`
      );
    },
    // 文件状态改变时的钩子
    fileChange(file, fileList) {
      this.fileList = fileList;
      if (file.status === "success") {
        this.fileList = [];
      }
    },
    handleRemove(file, fileList) {
      this.fileList = [];
    },
    // 回单上传和下载开始
    handlePreview(file, fileList) {
      console.log("per", file, fileList);
    },
    // 文件上传成功时的钩子
    handleSuccessIcon(res, file) {
      this.fileList = [];
      console.log(res.msg);
      // console.log(file.name, "filefilefile");
      if (res.code === 500) {
        console.log("res.code === 500");
        this.$message({
          type: "error",
          message: res.msg,
          duration: 2500,
        });
      } else {
        this.iconFileData.file = file.name;
        console.log("this.iconFileData.file,,,,,", this.iconFileData.file);
        this.$message.success("数据导入成功");
        this.selectShowT = false;
      }
    },
    // 文件上传失败时的钩子
    handleErrorIcon(err, file) {
      console.log("err=", err);
      console.log("file=", file);
      this.$message.error("文件上传失败");
    },
    //立即上传(点击icontub的上传)
    IcuoUploadFile() {
      console.log(this.fileList);
      if (this.fileList.length === 0) {
        this.$message.warning("请上传文件");
        return;
      }
      // this.$message({
      //     message: "文件正在上传",
      //     duration: 1200,
      //   });
      this.$refs.uploadIcon.submit();
      // this.getDispatchList();
      this.fileUploadVisible = false;
      // console.log("刷新了吗");
    },
    //点击关闭dialog
    handleClose(done) {
      this.fileList = [];
      this.fileUploadVisible = false;
    },
    //点击取消
    handleCancel() {
      this.fileList = [];
      this.fileUploadVisible = false;
      this.$message({
        type: "info",
        message: "已取消",
      });
    },
    //弹出框右上角叉号事件
    rightDuanbi() {
      this.fileUploadVisible = false;
    },
    //渲染表头，换行

    //组件的method方法
    renderHeader(h, para) {
      console.log("this.unitType===", this.unitType);
      console.log("this.unitType===", typeof this.unitType);
      let unitTypeNmae = "";
      switch (this.unitType) {
        case "3":
          unitTypeNmae = "三级";
          break;
        case "4":
          unitTypeNmae = "四级";
          break;
        case "5":
          unitTypeNmae = "五级";
          break;
        default:
          unitTypeNmae = "二级";
      }
      //该列的绑定数据
      console.log(para.column);
      //列号
      console.log(para.$index);
      return h("span", [h("span", unitTypeNmae + para.column.label)]);
    },
  },
};
</script>

<style scoped>
.el-pagination {
  text-align: right;
}
</style>